<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>流程信息</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-form-item prop="key" label="标识">
              <el-input v-model="queryInfo.key" />
            </el-form-item>
            <el-form-item prop="name" label="名称">
              <el-input v-model="queryInfo.name" />
            </el-form-item>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table ref="mainTableRef" :page="page" @changePage="changePage">
          <template #button>
            <el-button type="primary" icon="el-icon-upload" v-if="$hasPermission('flow:processDef:upload')"
              @click="toUpload">上传</el-button>
          </template>
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="key" label="标识" />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="category" label="类型" width="100" />
            <el-table-column prop="version" label="版本号" width="80" align="center"
              :formatter="(row: any) => 'v:' + row.version" />
            <el-table-column show-overflow-tooltip prop="resourceName" label="BPMN文件">
              <template #default="scope">
                <el-link type="primary" target="_blank" :href="$processSourceUrl(scope.row.id, '1')" :underline="false">
                  {{ scope.row.resourceName }}</el-link>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="diagramResourceName" label="流程图">
              <template #default="scope">
                <el-link type="primary" target="_blank" :href="$processSourceUrl(scope.row.id, '2')" :underline="false">
                  {{ scope.row.diagramResourceName }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="status" width="80" label="状态" align="center">
              <template #default="scope">
                <el-tag type="danger" size="small" v-if="scope.row.status == 1">暂停</el-tag>
                <el-tag type="success" size="small" v-else>正常</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" />
            <el-table-column label="操作" fixed="right" width="150" align="center">
              <template #default="scope">
                <el-button-group>
                  <el-button type="danger" icon="el-icon-delete" size="small" title="删除"
                    v-if="$hasPermission('flow:processDef:delete')" @click="del(scope.row)" />
                  <el-button type="info" icon="el-icon-video-play" size="small" title="恢复"
                    v-if="$hasPermission('flow:processDef:activate') && scope.row.status === 1"
                    @click="activate(scope.row)" />
                  <el-button type="warning" icon="el-icon-video-pause" size="small" title="暂停"
                    v-else-if="$hasPermission('flow:processDef:suspend') && !scope.row.status"
                    @click="suspend(scope.row)" />
                  <el-button type="info" icon="el-icon-document-add" size="small" title="启动" v-if="!scope.row.status"
                    @click="toStart(scope.row)">
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>

    <!-- 上传流程弹窗 text/xml, application/zip -->
    <process-upload ref="uploadProcessRef" accept=".bpmn20.xml, .bpmn, .zip" tip="只能上传bpmn文件及包含bpmn的zip文件"
      @upload="uploadProcess" />

    <!-- 启动流程弹窗 -->
    <start-component ref="startDialogRef" @apply="applyStart" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { pageProcessDef, uploadProcessDef, deleteProcessDef, activateProcessDef, suspendProcessDef } from 'src/api/flow/activiti'
import StartComponent from '../component/StartComponent.vue'
import ProcessUpload from 'src/component/upload/index.vue'
import useTable from 'src/hooks/useTable'
import { $hasPermission, $confirmMsg, $processSourceUrl } from 'src/hooks/useCommon'

const { page, initIndex } = useTable()

// 分页查询
const mainTableRef = ref()
const queryInfo = reactive({
  key: '',
  name: ''
})
const changePage = function (pageNumber: number, pageSize: number) {
  page.pageNumber = pageNumber
  page.pageSize = pageSize
  pageProcessDef({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
}
const search = function () {
  changePage(1, 10)
}
search()

// 删除
const del = (row: any) => {
  const id = row.id
  $confirmMsg('该操作将关联删除历史信息，确认删除吗？', () => {
    deleteProcessDef(id).then(() => {
      search()
    })
  })
}

// 暂停/恢复
const suspend = (row: any) => {
  const id = row.id
  $confirmMsg('确认暂停吗？', () => {
    suspendProcessDef(id).then(() => {
      search()
    })
  })
}
const activate = (row: any) => {
  const id = row.id
  $confirmMsg('确认恢复吗？', () => {
    activateProcessDef(id).then(() => {
      search()
    })
  })
}

// 上传流程
const uploadProcessRef = ref()
const toUpload = () => {
  uploadProcessRef.value.open()
}
const uploadProcess = (file: File) => {
  uploadProcessDef(file).then(() => {
    search()
  })
}

// 启动流程
const startDialogRef = ref()
const toStart = (row: any) => {
  startDialogRef.value.open(row.key)
}
const applyStart = () => {
  search()
}
</script>

<style lang="scss" scoped>
</style>
